<template>
    <div>
        <div class="text-xl ">【大区异常处理】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

let mychart = null
const chart = ref(null)
const props = defineProps(['data'])
console.log(props.data);
const getSeries = () => {
    const series = []
    props.data.abnormals.forEach((i, index) => {
        series.push({
            type: 'pie',
            radius: [73 - 15 * index + '%', 68 - 15 * index + '%'],
            name: i.name,
            z: 3,
            hoverAnimation: false,
            clockWise: false,
            center: ['55%', '55%'],
            label: false,
            data: [
                {
                    value: i.value,
                    name: i.name,
                    itemStyle: {
                        color: colorList[index],
                    },
                },
                {
                    value: 1000,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    },
                    label: {
                        show: false
                    },
                },

            ]
        })
        series.push({
            type: 'pie',
            radius: [73 - 15 * index + '%', 68 - 15 * index + '%'],
            name: i.name,
            hoverAnimation: false,
            clockWise: false,
            center: ['55%', '55%'],
            label: false,
            data: [
                {
                    value: 7,
                    itemStyle: {
                        color: 'rgb(3,31,62)',
                        borderWidth: 0
                    },
                    label: {
                        show: false
                    },
                },
                {
                    value: 3,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    },
                    label: {
                        show: false
                    },

                },

            ]
        })
    })

    return series
}
const option = ref({
    legend: {
        data: props.data.abnormals.map(i => i.name),
        icon: 'circle',
        width: -5,
        itemHeight: 10,
        itemWidth: 10,
        itemGap: 5,
        textStyle: {
            color: '#fff',
            lineHeight: 5,
            fontSize: 12
        },
        left: '55%',
        top: '15%',
    },
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{a}-{b}-{c}条-({d}%)'
    },
    xAxis: {
        show: false,
        axisLine: {
            show: false
        }
    },
    yAxis: {
        axisLine: {
            show: false
        },
        show: false,
        // type: 'category',
        // inverse: true
    },
    series: getSeries()

})
const initChart = () => {
    mychart.setOption(option.value)
}
onMounted(() => {
    mychart = echarts.init(chart.value)
    initChart()
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>

<style lang="scss" scoped></style>